<template>
  <div class="pay" v-loading="loading">
    <h2><span class="tag"></span> 支付方式</h2>
    <br />
    <br />
    <h2>IOS:</h2>
    <div class="row">
      <div class="item">
        <img class="img" src="../../../assets/image/pingguo.png" alt="" />
        <el-switch
          v-model="ios.apple"
          @change="change"
          active-color="#13ce66"
          inactive-color="#ccc"
          :active-value="1"
          :inactive-value="0"
        >
        </el-switch>
      </div>
      <div class="item">
        <img class="img" src="../../../assets/image/zhifubao.png" alt="" />
        <el-switch
          v-model="ios.alipay"
          @change="change"
          active-color="#13ce66"
          inactive-color="#ccc"
          :active-value="1"
          :inactive-value="0"
        >
        </el-switch>
      </div>
      <div class="item">
        <img class="img" src="../../../assets/image/weixin.png" alt="" />
        <el-switch
          v-model="ios.wxpay"
          @change="change"
          active-color="#13ce66"
          inactive-color="#ccc"
          :active-value="1"
          :inactive-value="0"
        >
        </el-switch>
      </div>
    </div>
    <!-- 安卓 -->
    <h2>Android:</h2>
    <div class="row">
      <div class="item">
        <img class="img" src="../../../assets/image/zhifubao.png" alt="" />
        <el-switch
          v-model="android.alipay"
          active-color="#13ce66"
          @change="change"
          inactive-color="#ccc"
          :active-value="1"
          :inactive-value="0"
        >
        </el-switch>
      </div>
      <div class="item">
        <img class="img" src="../../../assets/image/weixin.png" alt="" />
        <el-switch
          v-model="android.wxpay"
          active-color="#13ce66"
          inactive-color="#ccc"
          @change="change"
          :active-value="1"
          :inactive-value="0"
        >
        </el-switch>
      </div>
    </div>
    <!-- 提现 -->
    <!-- <br /><br />
    <h2><span class="tag"></span> 提现方式</h2>
    <br /><br />
    <h2>IOS:</h2> -->
    <!-- <div class="row">
      <div class="item">
        <img class="img" src="../../../assets/image/zhifubao.png" alt="" />
        <el-switch
          v-model="data.iosPay"
          active-color="#13ce66"
          inactive-color="#ebeff8"
          active-value="1"
          inactive-value="0"
        >
        </el-switch>
      </div>
      <div class="item">
        <img class="img" src="../../../assets/image/weixin.png" alt="" />
        <el-switch
          v-model="data.iosPay"
          active-color="#13ce66"
          inactive-color="#ebeff8"
          active-value="1"
          inactive-value="0"
        >
        </el-switch>
      </div>
    </div> -->
    <!-- 安卓 -->
    <!-- <h2>Android:</h2>
    <div class="row">
      <div class="item">
        <img class="img" src="../../../assets/image/zhifubao.png" alt="" />
        <el-switch
          v-model="data.iosPay"
          active-color="#13ce66"
          inactive-color="#ebeff8"
          active-value="1"
          inactive-value="0"
        >
        </el-switch>
      </div>
      <div class="item">
        <img class="img" src="../../../assets/image/weixin.png" alt="" />
        <el-switch
          v-model="data.iosPay"
          active-color="#13ce66"
          inactive-color="#ebeff8"
          active-value="1"
          inactive-value="0"
        >
        </el-switch>
      </div>
    </div> -->
  </div>
</template>

<script>
import {
  configRechargeSwitch,
  configSetRechargeSwitch,
} from "@/api/operationManagement";
export default {
  data() {
    return {
      loading: false,
      iosPay: "0",
      ios: {
        apple: 0,
        wxpay: 0,
        alipay: 0,
      },
      android: {
        wxpay: 0,
        alipay: 0,
      },
    };
  },
  methods: {
    async getList() {
      this.loading = true;
      const res = await configRechargeSwitch();
      this.loading = false;
      if (res.code == 0) {
        this.ios = res.data.ios;
        this.android = res.data.android;
      }
    },
    async change() {
      const res = await configSetRechargeSwitch({
        data: {
          android: this.android,
          ios: this.ios,
        },
      });
      if (res.code == 0) {
        this.$message.success("设置成功！");
        this.getList();
      }
    },
  },
  created() {
    this.getList();
  },
};
</script>

<style lang="less" scoped>
.pay {
  h2 {
    margin: 0 0;
    display: flex;
    align-items: center;
    .tag {
      display: inline-block;
      width: 5px;
      height: 18px;
      background-color: #7b94d8;
      margin-right: 10px;
    }
  }
  .row {
    display: flex;
    align-items: center;
    .item {
      display: flex;
      align-items: center;
      margin: 10px 200px 10px 0;
      .img {
        width: 40px;
        height: 40px;
        margin-right: 20px;
      }
    }
  }
}
</style>